<template>
  <view class="content">
    <!-- 功能模块网格 -->
    <view class="grid-container">
      <!-- 第一行功能模块 -->
      <view class="grid-row">
        <view class="grid-item" v-for="(item, index) in topModules" :key="index" @click="handleModuleClick(item)">
          <u-icon :name="item.icon" size="40" color="#2979ff"></u-icon>
          <text class="module-text">{{ item.text }}</text>
        </view>
      </view>

      <!-- 驾驶舱模块 -->
      <view class="dashboard-section">
        <text class="section-title">驾驶舱</text>
        <view class="dashboard-modules">
          <view class="grid-item" v-for="(item, index) in dashboardModules" :key="index" @click="handleModuleClick(item)">
            <u-icon :name="item.icon" size="40" color="#2979ff"></u-icon>
            <text class="module-text">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="charts-box">
      <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="handleNavClick(item)">
        <u-icon :name="item.icon" size="28" :color="isActive(item.key) ? '#2979ff' : '#666'"></u-icon>
        <text class="nav-text" :class="{ active: isActive(item.key) }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: '#FFFFFF'
          }
        }
      },
      topModules: [
        { icon: 'search', text: '质量巡检', key: 'quality' },
        { icon: 'checkmark-circle', text: '工序报验', key: 'process' },
        { icon: 'checkbox-mark', text: '质量验收', key: 'collect' },
        { icon: 'calendar', text: '考勤打卡', key: 'attendance' },
        { icon: 'edit-pen', text: '补卡申请', key: 'card' },
        { icon: 'list', text: '任务管理', key: 'task' },
        { icon: 'bell', text: '消息中心', key: 'message' }
      ],
      dashboardModules: [{ icon: 'chart', text: '质量态势', key: 'trend' }],
      navItems: [
        { icon: 'home', text: '主页', key: 'home', path: '/pages/index/index' },
        { icon: 'grid', text: '工作台', key: 'workspace', path: '/pages/workspace/index' },
        { icon: 'account', text: '通讯录', key: 'contacts', path: '/pages/contacts/index' },
        { icon: 'setting', text: '个人设置', key: 'settings', path: '/pages/settings/index' }
      ]
    }
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [
                { name: '一班', value: 50 },
                { name: '二班', value: 30 },
                { name: '三班', value: 20 },
                { name: '四班', value: 18 },
                { name: '五班', value: 8 }
              ]
            }
          ]
        }
        this.chartData = JSON.parse(JSON.stringify(res))
      }, 500)
    },
    handleModuleClick(item) {
      // 处理模块点击事件
      console.log('Module clicked:', item.key)
    },
    handleNavClick(item) {
      console.log(item, 'item')
      uni.navigateTo({
        url: item.path
      })
    },
    isActive(key) {
      const currentPages = getCurrentPages()
      const currentPage = currentPages[currentPages.length - 1]
      const currentPath = '/' + currentPage.route

      const matchingItem = this.navItems.find((item) => item.key === key)
      return matchingItem && matchingItem.path === currentPath
    }
  },
  onReady() {
    this.getServerData()
  }
}
</script>

<style>
.content {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  position: relative;
  padding-bottom: 120rpx; /* 为底部导航留出空间 */
}

/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300rpx;
}

.grid-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
}

.grid-row {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.module-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 10rpx;
}

.dashboard-section {
  margin-top: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin: 20rpx 0;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eee;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-text {
  font-size: 20rpx;
  color: #666;
  margin-top: 4rpx;
}

.nav-text.active {
  color: #2979ff;
}
</style>
